<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>加入我们</title>
</head>

<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="../css/ie.css"/>
<script src="js/ie.js"></script>
<![endif]-->



<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.animate-colors.js"></script>
<script src="js/jquery.transit.js"></script>


<script>


</script>

<body>

<div class="header">
    <div class="navber">
        <a class="logo" href=""><img src="img/logo.png" /></a>
        <div class="nav">
            <a href="../templates/index.html">首页<i></i></a>
            <a href="curriculum.html">精品课程<i></i></a>
            <a href="teacher.html">教师团队<i></i></a>
            <a href="../templates/tutor.html">我要找家教<i></i></a>
            <a href="about.html">关于图宇<i></i></a>
            <a class="itop" href="join.html">加入我们<i></i></a>
        </div>
        <a class="zixun" href="">在线咨询</a>
    </div>
</div>

<div class="join">
    <div class="join-banner"></div>
    <div class="join-centent">
        <div class="join-text">
            <p>有人说，你初中高中疯狂读取的知识在高考后几乎没有什么作用，</p>
            <p>有人说，你的特长更多时候仅仅也只能是兴趣爱好，</p>
            <p>都错了，他们一定是没听说过图宇教育。</p>
            <p>如果你想要利用课余时间减轻家里经济负担、解决自己的生活费甚至大学的费用；</p>
            <p>如果你想要利用空闲的周末为自己心中那个想去的地方积攒路费；</p>
            <p>如果你有一技之长想要证明一下自己......</p>
            <p>来图宇，都可以。</p>
        </div>
        <div class="join-form">
            <ul class="join-meun">
                <li class="curr">文化科目 Cultural subjects</li>
                <li>艺术科目 Art subjects</li>
            </ul>
            <div class="join-d">
                <form class="join-ds disblock">

                    <div class="join-left join-wf">

                        <div class="join-inps">
                            <label>姓名</label>
                            <input type="text" value="" placeholder="李X权" />
                        </div>
                        <div class="join-inps">
                            <label>性别</label>
                            <input type="text" value="" placeholder="男" />
                        </div>
                        <div class="join-inps">
                            <label>手机</label>
                            <input type="text" value="" placeholder="1508888888" />
                        </div>
                        <div class="join-inps">
                            <label>所在地</label>
                            <span class="join-select join-se-wk"><i>下拉选单</i>
                                <ul class="join-option join-se-wks">
                                    <li>越秀区</li>
                                    <li>天河区</li>
                                    <li>白云区</li>
                                    <li>海珠区</li>
                                    <li>番禺区</li>
                                    <li>其他</li>
                                </ul>
                            </span>
                            <input type="text" value="" placeholder="在此填写其他地区" />
                        </div>
                        <div class="join-inps">
                            <label>大学</label>
                            <input type="text" value="" placeholder="清华大学" />
                        </div>
                        <div class="join-inps">
                            <label>年级</label>
                            <input type="text" value="" placeholder="大一（大一大二大三大四或已毕业）" />
                        </div>
                        <div class="join-inps">
                            <label>生源地</label>
                            <input type="text" value="" placeholder="广东" />
                        </div>
                        <div class="join-inps">
                            <label>高考成绩</label>
                            <input type="text" value="" placeholder="700（一批）" />
                        </div>
                        <div class="join-inps">
                            <label>家教经验</label>
                            <input type="text"value="" placeholder="无/有（一年两年或三年以上）" />
                        </div>

                    </div>

                    <div class="join-right vertical">
                        <div class="join-rs">
                            <div class="join-bz">
                                <a class="awk-file" href="javascript:;">上传简历</a>
                                <input class="wk-file" type="file" />
                                <div class="join-d2">
                                    <span><img src="img/zuopin.jpg" alt=""></span>
                                    <span><img src="img/jianli.jpg" alt=""></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <form class="join-ds">
                    <div class="join-left vertical">
                        <div class="join-rs">
                            <div class="join-but">
                                <div class="join-bz">
                                    <a class="awk-file" href="javascript:;">上传简历</a>
                                    <input class="wk-file" type="file" />
                                    <div class="join-d2">
                                        <span><img src="img/zuopin.jpg" alt=""></span>
                                        <span><img src="img/jianli.jpg" alt=""></span>
                                    </div>
                                </div>
                                <div class="join-bz">
                                    <a class="awk-file" href="javascript:;">上传简历</a>
                                    <input class="wk-file" type="file" />
                                    <div class="join-d2">
                                        <span><img src="img/zuopin.jpg" alt=""></span>
                                        <span><img src="img/zuopin.jpg" alt=""></span>
                                        <span><img src="img/zuopin.jpg" alt=""></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="join-right join-wf">

                        <div class="join-inps">
                            <label>姓名</label>
                            <input type="text" value="" placeholder="李X权" />
                        </div>
                        <div class="join-inps">
                            <label>性别</label>
                            <input type="text" value="" placeholder="男" />
                        </div>
                        <div class="join-inps">
                            <label>手机</label>
                            <input type="text" value="" placeholder="150888888" />
                        </div>
                        <div class="join-inps">
                            <label>所在地</label>
                            <span class="join-select join-se-yk"><i>下拉选单</i>
                                <ul class="join-option join-se-yks">
                                    <li>越秀区</li>
                                    <li>天河区</li>
                                    <li>白云区</li>
                                    <li>海珠区</li>
                                    <li>番禺区</li>
                                    <li>其他</li>
                                </ul>
                            </span>
                            <input type="text" value="" placeholder="在此填写其他地区" />
                        </div>
                        <div class="join-inps">
                            <label>大学</label>
                            <input type="text" value="" placeholder="清华大学" />
                        </div>
                        <div class="join-inps">
                            <label>年级</label>
                            <input type="text" value="" placeholder="大一（大一大二大三大四或已毕业）" />
                        </div>
                        <div class="join-inps">
                            <label>生源地</label>
                            <input type="text" value="" placeholder="广东" />
                        </div>
                        <div class="join-inps">
                            <label>高考成绩</label>
                            <input type="text" value="" placeholder="700（一批）" />
                        </div>
                        <div class="join-inps">
                            <label>家教经验</label>
                            <input type="text"value="" placeholder="无/有（一年两年或三年以上）" />
                        </div>

                    </div>
                </form>
            </div>


            <div class="join-butt">
                <button class="join-button disblock">提交</button>
                <button class="join-button">提交</button>
                <span>添加HR的QQ：1991287952</span>
            </div>

            
        </div>
    </div>
    
    
    
</div>


<div class="footer">
    <div class="foos">
        <p>Copyright © 2015 广州市图宇教育有限公司 粤ICP备88888888号-1   Design：Laic</p>
    </div>
</div>

</body>
<script>


/* 下拉框 */
$(".join-se-wk").click(function(){
    $(".join-se-wks").slideToggle(500);
    $(".join-se-wks li").click(function(){
        var option = $(this).html();
        $(".join-se-wk i").html(option);
    })
})

$(".join-se-yk").click(function(){
    $(".join-se-yks").slideToggle(500);
    $(".join-se-yks li").click(function(){
        var option = $(this).html();
        $(".join-se-yk i").html(option);
    })
})


/* 表单切换 */
$(".join-meun li").click(function(){
    var formIndex = $(this).index();
    $(this).addClass("curr").siblings().removeClass("curr");
    $(".join-ds").eq(formIndex).removeClass("disblock").show(500).siblings().hide(500);
    $(".join-butt button").eq(formIndex).addClass("disblock").siblings().removeClass("disblock");
})

$('.asd').animate({ backgroundColor:'#400101' },1000)

/* header */
$(".nav a").hover(function(){
    var navIndex = $(this).index();
    $(this).find('i').stop(false,true).animate({ bottom:"0px"},300);

},function(){
    var navIndex = $(this).index();
    if($(this).hasClass("itop")){
        false;
    }else{
        $(this).find('i').stop(false,true).animate({ bottom:"-4px"},300);
    }
    
})


/* 上传按钮 
$(".awk-file").each(function(){
    $(".wk-file").click();
})*/

/* 表单tab切换 */





/* 上传那位置的垂直居中 
var rt = $(".join-right").height();
var rs = $(".join-rs").height();
var marTop = (rt-rs)/2;
console.log(marTop);
$(".join-rs").css("margin-top",marTop+"px");*/





</script>


</html>